<!DOCTYPE html>
<html>
    <head>
        <title> My First Page </title>
    </head>
    <body>
        <!-- 
            Chapter 1: Titles and Texts
         -->
        <h1>Title 1</h1>
        <h2>Title 2</h2>
        <h3>Title 3</h3>
        <h4>Title 4</h4>
        <h5>Title 5</h5>
        <h6>Title 6</h6>

        <!-- This is a comment, use "Ctrl + /" in VSCode to input it. -->

        <p>This is a paragraph.</p>

        <p>
            1 2 3 4 5
            6 7 8 9 0
        </p>

        <pre id="ids">
            1
            2 3
            4 5 6
            7 8 9 0
        </pre>

        <code>
            document.getElementById("chapter2").style.marginLeft="200vw";
        </code>

        <hr/>   
        
        <p>
            1 2 3 4 5 <br/> 6 7 8 9 0
        </p>

        <!-- Try to add some style to your paragragh. -->

        <p>
            1 2 3 4 5
            6 7 8 9 0
        </p>

        <!-- 
            Chapter 2: Hyperlinks
         -->

        <a href="www.baidu.com">GO TO BAIDU</a> <br/> 



        <a href="#ids">Try to use anchor!</a>




        <h2 id="anchor">Here is my destination.</h2>


        <!-- 
            Chapter 3: Multi-media Elements
         -->

         <img alt="img1" title="myimg1" src="https://img-home.csdnimg.cn/images/20201124032511.png"></img><br/>
         <img alt="img2" title="myimg2" src="src/bg_button.png"></img><br/>
         <audio controls="controls" src="src/bgm.mp3"></audio>
         <video controls="controls" src=""></video>

        <!-- 
            Chapter 4: Tables
         -->
        <table border="1" style="border-collapse: collapse;">
            <caption>Table 1. Try to insert a table!</caption>
             <tr>
                <th colspan="2">11 This is a heading.</th>
                <td rowspan="2">12 This is a datacell.</td>
            </tr>
             <tr>
                <td>21</td>
                <td>22</td>
        
            </tr>
            <!--<tr>
                <td colspan="2">31</td>
                <td rowspan="2">32</td>
            </tr>
            <tr>
                <td>41</td>
                <td>42</td>
            </tr> -->
        </table>

        <table border="1" style="border-collapse: collapse;">
            <caption>Table 2. Some Countries and Capitals</caption>
            <tr>
                <th>Continent</th>
                <th>Countries</th>
                <th>Capitals</th>
            </tr>
            <tr>
                <td rowspan="3">Asia</td>
                <td>China</td>
                <td>Beijing</td>
            </tr>
            <tr>
                <td>Japan</td>
                <td>Tokyo</td>
            </tr>
            <tr>
                <td>Vietnam</td>
                <td>Hanoi</td>
            </tr>
            <tr>
                <td rowspan="4">North America</td>
                <td>Canada</td>
                <td>Ottawa</td>
            </tr>
            <tr>
                <td>USA</td>
                <td>Washington D.C.</td>
            </tr>
            <tr>
                <td>Mexico</td>
                <td>Mexico City</td>
            </tr>
            <tr>
                <td>Cuba</td>
                <td>Havana</td>
            </tr>
            <tr>
                <th>Total</th>
                <td colspan="2">7</td>
            </tr>
        </table>

        <!-- 
            Chapter 5: Lists
         -->
        
        <ul>
            <li>Learn HTML</li>
            <li>Learn CSS</li>
            <li>Learn JS</li>
        </ul>

        <ol>
            <li>Learn HTML</li>
            <li>Learn CSS</li>
            <li>Learn JS</li>
        </ol>
        <!-- list embedding -->
        <ul>
            <li>1</li>
            <ul>
                <li>1.1</li>
                <ul>
                    <li>1.1.1</li>
                    <ul>
                        <li>1.1.1.1</li>
                        <li>How to compute Fourier Transform</li>
                    </ul>
                </ul>
            </ul>
        </ul>


        <!-- 
            Chapter 6: Others
         -->



        <!-- 
            Chapter 7: Sheets(SELECTIVE)
         -->


    </body>
</html>


